<template>
  <div style="margin:70px;">
	<el-input placeholder="请输入你的成绩" style="width:20%;margin-right:20px" v-model="score"></el-input>
<el-select v-model="type"  placeholder="请选择" @change="handleTypeChange"  style="margin-top:0px;width:100px">
    <el-option
      v-for="item in examType"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
	<el-button type="primary"  style="margin-left:20px;background:red;margin-right:100px" @click="search">查询</el-button>你的位次是{{start}}-{{end}}之间,跟你同分数还有{{equalScores}}人
    <ve-line :data="chartData" :settings="chartSettings" ></ve-line>
  </div>
</template>

<script>
import { fetchSegmentedScores, getSegmentedScore } from "@/api/score"
import VeLine from 'v-charts/lib/line.common'

export default {
  components: { VeLine },
  data () {
    return {
      chartData: {
        columns: ['score', 'equalScores'],
        rows: [
          { 'score': 1, 'equalScores': 1231 },
        ],
		 
      },
	  examType:[{
          value: '1',
          label: '理科'
        }, {
          value: '2',
          label: '文科'
        }],
        score:'',
        type:'1',
		start:'',
		end:'',
		equalScores:'--',
     	 chartSettings: {
        yAxis: {

        },
        series: [
          {
            name: 'score',
            itemStyle: { // 设置折线点的颜色
              color: '#ff0000' // 例如，将折线点的颜色设置为红色
            },
            lineStyle: { // 设置折线的颜色和宽度
              color: '#ff0000', // 例如，将折线的颜色设置为红色
              width: 2 // 设置折线的宽度
            }
          }
        ]
      }
    }
  },
  created() {
    getSegmentedScore(this.type).then(res => {
      if (res.data.code === 1) {
        this.chartData.rows = res.data.data
      }
    })
  },methods:{
	//查询按钮
	search(){
		if(this.score===''){
			this.$message.error("请输入分数")
			return
		}
		fetchSegmentedScores({"type":this.type,"score":this.score}).then(res=>{
			if(res.data.code===1){
				if(res.data.data===null){
					this.$message.error("没有找到该分数对应的位次,换个分数试试吧")
					this.equalScores='--'
					this.start=''
					this.end=''
					return
				}
				this.equalScores=res.data.data.equalScores
				this.start=res.data.data.start
				this.end=res.data.data.end
			}
		})
	},
	//下拉框发生变化
	handleTypeChange(){
 	getSegmentedScore(this.type).then(res => {
      if (res.data.code === 1) {
        this.chartData.rows = res.data.data
      }
    })
	}
  }
}
</script>